<template>
  <div class="detail">
    <NavBar>
      <template #left>
        <div class="back" @click="router.back()">旅途</div>
      </template>
      <template #center>
        <div ref="ls" class="title">房屋详情</div>
      </template>
    </NavBar>
    <tabCtrol @tab-click="onTabClick" class="tabs" :titles="names" v-if="showTab"></tabCtrol>
    <div class="main" v-if="mainPart">
      <DetailSwiper :swiper-date="mainPart.topModule.housePicture.housePics"></DetailSwiper>
      <DetailInfo name="描述" :ref="els" :Infos="mainPart.topModule"></DetailInfo>
      <section></section>
      <DetailFacility name="设施" :ref="els" :houseFacility="mainPart.dynamicModule.facilityModule.houseFacility">
      </DetailFacility>
      <section></section>
      <DetailIntroduce name="房东" :ref="els" :introduce="mainPart.dynamicModule.landlordModule"></DetailIntroduce>
      <section></section>
      <DetailComment name="评论" :ref="els" :comments="mainPart.dynamicModule.commentModule"></DetailComment>
      <section></section>
      <DetailReserve name="须知" :ref="els" :reserves="mainPart.dynamicModule.rulesModule.orderRules"></DetailReserve>
      <section></section>
      <DetailAddress name="周边" :ref="els" :position="mainPart.dynamicModule.positionModule"></DetailAddress>
      <section></section>
      <DetailPrice :price-intro="mainPart.introductionModule"></DetailPrice>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed, watch, getCurrentInstance } from 'vue';
import NavBar from '../Home/cnp/home-nav-bar.vue';
import DetailSwiper from '../Detail/cnps/detailSwiper.vue'
import DetailInfo from './cnps/detailInfo.vue';
import DetailFacility from './cnps/detailFacility.vue';
import DetailIntroduce from './cnps/detailIntroduce.vue';
import DetailComment from './cnps/detailComment.vue';
import DetailReserve from './cnps/detailReserve.vue';
import DetailAddress from './cnps/detailAddress.vue';
import DetailPrice from './cnps/detailPrice.vue';
import tabCtrol from '../../components/common/tabCtrol.vue';
import { useScroll } from '../../hook/useScroll';
import { getDetailInfos } from '../../network/detail';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
// 获取网络数据
let detailInfos = ref({})
// let ls = ref();
// console.log(ls.value);
// console.log(ls);
const detailList = async () => {
  const res = await getDetailInfos(route.query.houseId);
  // console.log(res.data.data);
  detailInfos.value = res.data.data;
}
onMounted(() => {
  detailList();//获取数据
})
const mainPart = computed(() => detailInfos.value.mainPart)
// 获取滚动高度
let { scrollTop } = useScroll()
// console.log(scrollTop);
// 滚动到一定区域就显示tab栏
const showTab = computed(() => { return scrollTop.value >= 300 });
//动态获取元素对象的数据;
let arr = ref({})
const els = (val) => {
  if (!val) return;
  // console.log(val.$el);
  // console.log(val.$el.getAttribute('name'));
  // arr.value.push(val.$el.getAttribute('name'));
  const name = val.$el.getAttribute('name');
  arr.value[name] = val.$el
};
// 拿到对象的name属性
const names = computed(() => {
  // console.log(arr.value);
  return Object.keys(arr.value)
})
let currentDistance = -1;
//子组件传过来的点击事件,点击哪个就滑动到哪个区域
function onTabClick(index) {
  // console.log(index);
  const key = Object.keys(arr.value)[index];
  // console.log(key);
  // console.log(arr.value[key]);
  // console.log(arr);
  let el = arr.value[key]
  let instant = el.offsetTop - 44;
  currentDistance = instant
  window.scrollTo({
    top: instant,
    behavior: "smooth"
  });
}
//或取tab元素对象的滚动距离
let instants = computed(() => {
  let newArr = []
  // console.log(arr.value);
  // console.log(names.value);
  names.value.forEach(el => {
    newArr.push(arr.value[el].offsetTop - 44)
  });
  return newArr
})
// 这里是拿不到数据的，还没滚动
console.log(instants);
console.log(instants.value);

// 滚动的距离
const cxt = getCurrentInstance()//相当于vue2中的this
// 获取到 全局事件总线
const bus = cxt.appContext.config.globalProperties.$bus
watch(scrollTop, (newVal) => {
  // console.log(instants);
  // console.log(instants.value);
  instants.value.find((item, i) => {
    // console.log(item);
    // console.log(instants.value);
    if (item - 44 <= newVal) {
      return bus.emit("updates", i);
    }
    // console.log(item, newVal);
  })
})
// console.log(scrollTop.value);
</script>
<style lang="less" scoped>
.title {
  font-size: 16px;
}

.tabs {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
}

.back {
  color: #ff9854;
  font-size: 14px;
  margin-left: 25px;
  font-weight: 500;

  &::before {
    content: '';
    display: inline-block;
    height: 7px;
    width: 7px;
    margin-right: 5px;
    border-left: 1.7px solid #ff9854;
    border-bottom: 1.7px solid #ff9854;
    transform: rotate(45deg);
    padding-bottom: 1px;
  }
}

section {
  padding: 0 15px;
  margin-top: 12px;
  border-top: 5px solid #f2f3f4;
  background-color: #fff;
}
</style>
